<template>
    <div class="container">
        <div class="topTitle">生成资产二维码</div>
        <NScrollbar style="max-height: 100%" v-if="QRCodeData && QRCodeData.length > 0">
            <div class="content" id="qrcode_content">
                <!-- <NGrid x-gap="12" y-gap="12" :cols="3">
                    <NGi v-for="item in QRCodeData">
                        <div class="assets_box">
                            <div class=assets_img>
                                <NQrCode :value="assetsUrl(item)" />
                            </div>
                            <div class="assets_info">
                                <div>资产编码：{{ item.assetNumber }}</div>
                                <div>资产名称：{{ item.assetName || '-' }}</div>
                                <div>入库日期：{{ item.createTime }}</div>
                                <div>初始存放地点：{{ item.warehouseName }}</div>
                            </div>
                        </div>
                    </NGi>
                </NGrid> -->
                <div class="assets_box" v-for="item in QRCodeData">
                    <div class=assets_img>
                        <NQrCode :value="assetsUrl(item)" :size="120" :error-correction-level="'M'" type='svg'/>
                    </div>
                    <div class="assets_info">
                        <div>资产编码：{{ item.assetNumber }}</div>
                        <div>资产名称：{{ item.assetName || '-' }}</div>
                        <div>入库日期：{{ item.createTime }}</div>
                        <div>初始存放地点：{{ item.warehouseName }}</div>
                    </div>
                </div>
            </div>
        </NScrollbar>
    </div>
    <FixedAction>
        <div class="foot_btn">
            <NButton style="width: 78px; color: #5fb17f" ghost @click="goBack" class="back_btn">
                <template #icon>
                    <img :src="VBackImg" style="width: 25rem; height: 25rem" />
                </template>
                返回
            </NButton>
            <NButton type="primary" class="print_btn" @click="print" v-print="printObj">打印</NButton>
        </div>
    </FixedAction>
</template>

<script setup lang="ts">
import FixedAction from '@/components/FixedAction.vue'
import VBackImg from '@/assets/images/back.png'
import {
    NSpace,
    NForm,
    NInput,
    NFormItem,
    NSelect,
    NButton,
    NScrollbar,
    NModal,
    NIcon,
    useMessage,
    NSpin,
    NTreeSelect,
    NInputNumber,
    NGrid,
    NGi,
    NQrCode
} from 'naive-ui';
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { useTagStore } from '@/stores/layout'
import { useRoute } from 'vue-router'
import router from '@/router'

const tags = useTagStore().tags
const message = useMessage()
const route = useRoute()
const QRCodeData = ref<any>([])
const printObj = ref({
    id: "qrcode_content", // 这里是要打印元素的ID
    // url:'https://www.baidu.com/',
    popTitle: "杭州国家版本馆", // 打印的标题
    // extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css", // 打印可引入外部的一个 css 文件
    // extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>', // 打印头部文字
    // preview: true, // 是否启动预览模式，默认是false
    previewTitle: '打印资产二维码', // 打印预览的标题
    previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
    zIndex: 20003, // 预览窗口的z-index，默认是20002，最好比默认值更高
    previewBeforeOpenCallback() {  }, // 预览窗口打开之前的callback
    previewOpenCallback() {  }, // 预览窗口打开时的callback
    beforeOpenCallback(vue: any) {
        vue.printLoading = true
    }, // 开始打印之前的callback
    openCallback(vue: any) {
        vue.printLoading = false
    }, // 调用打印时的callback
    closeCallback() {  }, // 关闭打印的callback(点击弹窗的取消和打印按钮都会触发)
    clickMounted() {  },

})
onMounted(() => {
    
})

const initData = () => {
    const data = localStorage.getItem("hzbbg-assets-data")
    if (data && data.length > 0) {
        QRCodeData.value = JSON.parse(data)
    }
}

watch(
    () => route,
    async () => {
        if (route.path == '/OA/Assets/QRCdoe') {
            initData()
        }
    },
    { deep: true, immediate: true }
)

onUnmounted(() => {
    // localStorage.getItem("hzbbg-assets-data") && localStorage.removeItem("hzbbg-assets-data")
})
const goBack = () => {
    const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
    tags.splice(index, 1)
    if (tags.length == 0) {
        router.push({ path: '/OA/Workbench/UserDesktop' })
    } else history.back()
}
/** 打印功能 */
const print = () => {
    // if(!(QRCodeData && QRCodeData.value.length > 0)) {
    //     return false
    // }
    // if(!window.print) {
    //     return message.warning("抱歉，打印功能暂不可用")
    // }
    // window.print()

}
/** 拼接移动端的浏览地址 */
const assetsUrl = (assets: any) => {
    const host = window.location.host
    let baseUrl = "https://oa.hzgjbbg.cn/mobile/#"
    // 测试地址无效没法跳转（下面这行代码没用）
    if (host.includes("test") || host.includes("localhost")) {
        baseUrl = "https://oatest.hzgjbbg.cn:8061/mobile/#"
    }
    return `${baseUrl}/assetsInfo?id=${assets.id}`
}

</script>

<style scoped lang="scss">
@mixin CommonFont {
    font-size: 16rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
}

@media print {
    .content {
        height: 100%;
        background-color: #ebeceb;
        padding-top: 10px;
    }

    .assets_box {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 50px;

        .assets_img {
            .n-qr-code {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0 !important;
            }
        }

        .assets_info {
            margin-left: 20px;
            font-size: 16px;
            font-weight: bolder;

            div {
                height: 30px;
                line-height: 30px;
                font-size: 16px;
                font-weight: bolder;
                font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            }
        }
    }
}

.container {
    .topTitle {
        width: 100%;
        border-bottom: 1px solid #fff;
        padding: 15rem 20rem;
        margin-bottom: 20rem;
        @include CommonFont;
    }

    .content {
        height: 100%;
        background-color: #ebeceb;
        display: flex;
        flex-wrap: wrap;
        margin: 20rem 20rem 180rem 20rem;
        padding-top: 20px;
    }

    .assets_box {
        width: 28%;
        margin-right: 4%;
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .assets_img {
            .n-qr-code {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0 !important;
                width: 120px !important;
                height: 120px !important;
            }
        }

        .assets_info {
            margin-left: 10px;
            font-size: 12px;

            div {
                height: 20px;
                line-height: 20px;
            }
        }
    }
    .assets_box:nth-child(3n + 1) {
        margin-left: 4%;
    }
}

.foot_btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    .back_btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 30px;
    }

    .print_btn {
        width: 100px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50%;
    }
}
</style>